<template>
  <div>
    <a-tabs v-model="tabKey">
      <a-tab-pane
        key="1"
        tab="绘制"
      >
      </a-tab-pane>
      <a-tab-pane
        key="2"
        tab="显示"
      >
      </a-tab-pane>
    </a-tabs>
    <div v-if="tabKey == '1'">
      <a-button
        type="primary"
        @click="getData"
      >
        获取数据
      </a-button>
      <a-button
        type="primary"
        @click="disable = false"
        style="margin-left:10px"
      >
        启用
      </a-button>
      <a-button
        type="danger"
        @click="disable = true"
        style="margin-left:10px"
      >
        禁用
      </a-button>
      <TMapDraw
        ref="TMapDraw"
        :height="'70vh'"
        :disable="disable"
        :data="data"
      />
    </div>
    <div v-else>
      <TMapView
        ref="TMapView"
        :height="'70vh'"
        :config="config"
        :multiMarker="multiMarker"
        :trajectory="trajectory"
        :multiPolyline="multiPolyline"
        :multiPolygon="multiPolygon"
        :multiCircle="multiCircle"
      />
    </div>
  </div>
</template>

<script>
import TMapDraw from '@/components/Power/TencentMap/TMapDraw.vue'
import TMapView from '@/components/Power/TencentMap/TMapView.vue'

export default {
  data() {
    return {
      tabKey: '1',
      config: {
        lat: 28.689602,
        lng: 115.882302,
        zoom: 14,
      },
      disable: false,
      data: {
        marker: [
          {
            lat: 28.868006973817334,
            lng: 116.1935805391206,
          },
        ],
        polyline: [
          {
            distance: '98011.64米',
            paths: [
              {
                height: 0,
                lat: 28.96654564752112,
                lng: 116.08649732560502,
              },
              {
                height: 0,
                lat: 28.75854359811914,
                lng: 116.13317459371524,
              },
              {
                height: 0,
                lat: 29.00137227686279,
                lng: 116.41872989960598,
              },
              {
                height: 0,
                lat: 29.066190542947933,
                lng: 116.06041292675422,
              },
            ],
          },
        ],
        polygon: [
          {
            area: '636318158.38平方米',
            paths: [
              {
                height: 0,
                lat: 28.75372938360388,
                lng: 116.307528070329,
              },
              {
                height: 0,
                lat: 28.65860318143746,
                lng: 116.1167002983077,
              },
              {
                height: 0,
                lat: 28.48377977931993,
                lng: 116.22927491568612,
              },
              {
                height: 0,
                lat: 28.48981299539024,
                lng: 116.37479829151766,
              },
              {
                height: 0,
                lat: 28.657398493747948,
                lng: 116.46128861481907,
              },
            ],
          },
          {
            area: '1193643737.16平方米',
            paths: [
              [
                {
                  height: 0,
                  lat: 28.836816085206923,
                  lng: 116.92869203413488,
                },
                {
                  height: 0,
                  lat: 28.834331382964063,
                  lng: 116.56563269571984,
                },
                {
                  height: 0,
                  lat: 28.491030179621937,
                  lng: 116.57249663622702,
                },
                {
                  height: 0,
                  lat: 28.499132559713033,
                  lng: 116.93772102023127,
                },
                {
                  height: 0,
                  lat: 28.506713951376867,
                  lng: 117.27948501255946,
                },
                {
                  height: 0,
                  lat: 28.839141628537245,
                  lng: 117.26850258201944,
                },
              ],
              [
                {
                  height: 0,
                  lat: 28.777669058341687,
                  lng: 116.64352799548419,
                },
                {
                  height: 0,
                  lat: 28.784239869548113,
                  lng: 117.19254552402185,
                },
                {
                  height: 0,
                  lat: 28.548795358651354,
                  lng: 117.19400871094899,
                },
                {
                  height: 0,
                  lat: 28.545083859251125,
                  lng: 116.64507545720903,
                },
              ],
            ],
          },
        ],
        circle: [
          {
            center: {
              lat: 28.676671157417395,
              lng: 115.85313361619251,
            },
            radius: 11560.55763791872,
          },
        ],
      },
      multiMarker: [
        {
          id: 'marker-layer',
          geometries: [
            {
              id: '1',
              position: {
                lat: 28.696832697601756,
                lng: 115.87792695219832,
              }, //点标记坐标位置
              properties: {
                //自定义属性
                title: 'marker1',
                // 固定属性，用于弹框显示信息
                content: '你好啊',
              },
            },
            {
              id: '2',
              position: {
                lat: 28.691928833725783,
                lng: 115.87852439922813,
              }, //点标记坐标位置
              properties: {
                //自定义属性
                title: 'marker1',
                // 固定属性，用于弹框显示信息
                content: '你好啊',
              },
            },
            {
              id: '3',
              position: {
                lat: 28.686388312864562,
                lng: 115.88168233760075,
              }, //点标记坐标位置
              properties: {
                //自定义属性
                title: 'marker1',
                // 固定属性，用于弹框显示信息
                content: '你好啊',
              },
            },
          ],
        },
        {
          id: 'marker-layer2',
          styles: [
            {
              id: 'myStyle',
              src: require('@/assets/icons/addr_icon.png'),
            },
          ],
          geometries: [
            {
              id: '1',
              styleId: 'myStyle',
              position: {
                lat: 28.693688261849672,
                lng: 115.87280597048971,
              }, //点标记坐标位置
              properties: {
                //自定义属性
                title: 'marker1',
                // 固定属性，用于弹框显示信息
                content: '你好啊',
              },
            },
            {
              id: '2',
              styleId: 'myStyle',
              position: {
                lat: 28.681708590551025,
                lng: 115.88117023933228,
              }, //点标记坐标位置
              properties: {
                //自定义属性
                title: 'marker1',
                // 固定属性，用于弹框显示信息
                content: '你好啊',
              },
            },
            {
              id: '3',
              styleId: 'myStyle',
              position: {
                lat: 28.695672262660363,
                lng: 115.88381607968074,
              }, //点标记坐标位置
              properties: {
                //自定义属性
                title: 'marker1',
                // 固定属性，用于弹框显示信息
                content: '你好啊',
              },
            },
          ],
        },
      ],
      multiPolyline: [
        {
          id: 'polyline-layer',
          styles: [
            {
              id: 'style_blue',
              color: '#3777FF', //线填充色
              width: 6, //折线宽度
              borderWidth: 5, //边线宽度
              borderColor: '#FFF', //边线颜色
              lineCap: 'butt', //线端头方式
            },
            {
              id: 'style_red',
              color: '#CC0000', //线填充色
              width: 6, //折线宽度
              borderWidth: 5, //边线宽度
              borderColor: '#CCC', //边线颜色
              lineCap: 'round', //线端头方式
              dashed: true, // 虚线
            },
          ],
          geometries: [
            {
              id: 'pl_1', // 折线唯一标识，删除时使用
              styleId: 'style_blue', // 绑定样式名
              paths: [
                {
                  lat: 28.701470386986262,
                  lng: 115.87803509564924,
                },
                {
                  lat: 28.6960735695511,
                  lng: 115.87335909901321,
                },
              ],
            },
            {
              id: 'pl_2', // 折线唯一标识，删除时使用
              styleId: 'style_red', // 绑定样式名
              paths: [
                {
                  lat: 28.701470386986262,
                  lng: 115.87803509564924,
                },
                {
                  lat: 28.700175176847466,
                  lng: 115.88003909524264,
                },
                {
                  lat: 28.69724547362374,
                  lng: 115.87810541131137,
                },
              ],
            },
          ],
        },
      ],
      multiPolygon: [
        {
          id: 'polygon-layer',
          styles: [
            {
              id: 'polygon',
              color: 'rgba(41,91,255,0.16)', //面填充色
              borderColor: 'rgba(41,91,255,1)', //边线颜色
            },
          ],
          geometries: [
            {
              id: 'polygon', //多边形图形数据的标志信息
              styleId: 'polygon', //样式id
              paths: [
                {
                  lat: 28.69541681135498,
                  lng: 115.86958984583919,
                },
                {
                  lat: 28.6946074938866,
                  lng: 115.8688571708426,
                },
                {
                  lat: 28.69375056275217,
                  lng: 115.86731041371354,
                },
                {
                  lat: 28.692441348892526,
                  lng: 115.86874862661352,
                },
                {
                  lat: 28.693345898449643,
                  lng: 115.87070242688048,
                },
                {
                  lat: 28.69439326166982,
                  lng: 115.87162505324216,
                },
              ], //多边形的位置信息
              properties: {
                //多边形的属性数据
                title: '一号小组巡防区域',
              },
            },
            {
              id: 'polygon2', //多边形图形数据的标志信息
              styleId: 'polygon', //样式id
              paths: [
                [
                  {
                    lat: 28.703435740655912,
                    lng: 115.87502650158467,
                  },
                  {
                    lat: 28.704118768391673,
                    lng: 115.87388508637355,
                  },
                  {
                    lat: 28.701494824572336,
                    lng: 115.87173731689086,
                  },
                  {
                    lat: 28.70098741182377,
                    lng: 115.87251905994856,
                  },
                  {
                    lat: 28.69900538193017,
                    lng: 115.87557261846587,
                  },
                  {
                    lat: 28.701663028381265,
                    lng: 115.87798885888901,
                  },
                ],
                [
                  {
                    lat: 28.70310544015402,
                    lng: 115.87348198877464,
                  },
                  {
                    lat: 28.703697250979157,
                    lng: 115.87394985959281,
                  },
                  {
                    lat: 28.70324294299214,
                    lng: 115.87486802952367,
                  },
                  {
                    lat: 28.70259287430587,
                    lng: 115.87443140933613,
                  },
                ],
              ], //多边形的位置信息
              properties: {
                //多边形的属性数据
                title: '二号小组巡防区域',
              },
            },
          ],
        },
      ],
      multiCircle: [
        {
          id: 'circle-layer',
          styles: [
            {
              id: 'circle',
              color: 'rgba(41,91,255,0.16)', //面填充色
              borderColor: 'rgba(41,91,255,1)', //边线颜色
            },
          ],
          geometries: [
            {
              id: 'circle_1', //多边形图形数据的标志信息
              styleId: 'circle', //样式id
              center: {
                lat: 28.681499132850366,
                lng: 115.88109473549935,
              },
              radius: 757,
              properties: {
                //多边形的属性数据
                title: '三号小组巡防区域',
              },
            },
          ],
        },
      ],
      trajectory: {
        path: [
          { lat: 28.687669221398657, lng: 115.90134901880538 },
          { lat: 28.688199941748323, lng: 115.89590971459256 },
          { lat: 28.687802922046117, lng: 115.88911856667346 },
          { lat: 28.687670168877297, lng: 115.88655589971108 },
          { lat: 28.688004005140048, lng: 115.8852029475554 },
          { lat: 28.688204564146403, lng: 115.88473535174012 },
          { lat: 28.689085393813016, lng: 115.88321176088198 },
          { lat: 28.6945076205206, lng: 115.8748915176626 },
          { lat: 28.696833012955995, lng: 115.87153993923675 },
        ],
        speed: 350,
      },
    }
  },
  methods: {
    getData() {
      let data = this.$refs.TMapDraw.getData()
      console.log('data---', data)
    },
  },
  components: {
    TMapDraw,
    TMapView,
  },
}
</script>

<style>
</style>